<template>
	<view>
		<dsl-navbar title="研习社" isBack bgTopImg="white" isicon=""></dsl-navbar>
		<view class="padding rowsb align-center">
			<view class="search_body rowsc align-center">
				<image src="../../../static/icon/icon_sysous.png" mode="widthFix" style="width: 30rpx;"
					class="margin-right-sm"></image>
				<input type="text" value="" placeholder="请输入关键词搜索"v-model="title" />
			</view>
			<view class="seach_submit">搜索</view>
		</view>
		<view class="padding">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index ) in carouselList" @click="preview(index,carouselList)">
					<image :src="item.big_title_image" mode="aspectFill" class="swiper_image animation-scale-up"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="consult_body solid-bottom" v-for="(item,inedx) in articleList" :key="item.id"
			@click="$tools.push('/pages/workbench/modules/articleText?id='+item.id)">
			<view style="width: 440rpx;" class="lineshow3">{{item.title}}</view>
			<view>
				<image :src="item.title_image" mode="aspectFill" class="consult_image animation-scale-up"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getarticle,
		articleWorkbench, //工作台研习社
	} from '../../../common/path.js'
	import {preview} from '../../../common/updataImgList.js'
	export default {
		data() {
			return {
				articleList: [],//列表
				carouselList:[],//轮播
				title:''
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			this.getarticle()
		},
		watch:{
			title(){
				this.getarticle()
			}
		},
		
		methods: {
			preview(index,array){
				let list = []
				array.forEach(item=>{
					list.push(item.big_title_image)
				})
				preview(index,list)
				
			},
			//文章
			getarticle() {
				//工作台研习社
				let datas = {
					status: 1
				}
				this.Http.POST(articleWorkbench, datas)
					.then((res) => {
						console.log('[工作台研习社]', res);
						if (res.code == 1) {
							this.carouselList = res.data.carousel
						}
					})
				let data = {
					status: 1,
					page: 1,
					listrows: 2099,
					title:this.title
				}

				this.Http.POST(getarticle, data)
					.then((res) => {
						if (res.code == 1) {
							this.articleList = res.data
							if(res.data[0]){
								this.title_image = res.data[0].title_image
							}
						} else {
							this.articleList = []
						}
					})
			},
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.swiper_image {
		width: 690rpx;
		height: 300rpx;
		background: #07D6C6;
		opacity: 1;
		border-radius: 20rpx;
		width: 100%;
	}

	.search_body {
		width: 540rpx;
		height: 60rpx;
		background: #F5F6F7;
		opacity: 1;
		border-radius: 30rpx;
	}

	.seach_submit {
		width: 120rpx;
		height: 60rpx;
		background: #8B8787;
		opacity: 1;
		line-height: 60rpx;
		border-radius: 99rpx;
		color: white;
		text-align: center;
	}

	.workbench_image {
		width: 690rpx;
		height: 260rpx;
		background: #09DECF;
		opacity: 1;
		border-radius: 10px;
	}

	.consult_body {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;

	}

	.consult_image {
		width: 230rpx;
		height: 160rpx;
		background: #D5E4EA;
		opacity: 1;
		border-radius: 10rpx;
	}
</style>
